<template>
  <div class="amendRole">
      <!-- 面包屑 -->
      	<el-breadcrumb separator=">" class="crumbs">
      	  	<el-breadcrumb-item :to="{ path: '/role'}">查看角色</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/role'}">修改角色</el-breadcrumb-item>
      	</el-breadcrumb>
      <!-- 添加用户的列表 -->
    <el-row  :gutter="20">
      <el-col :span="8" class="roleText roleStyle">角色编号</el-col><el-col class="roleStyle" :span="16"><el-input placeholder="请输入内容" v-model="roleId" :disabled="true"></el-input></el-col>
      <el-col :span="8" class="roleText roleStyle">角色名称</el-col><el-col class="roleStyle" :span="16"><el-input @keyup.native="delSpace('roleName')" placeholder="请输入内容" v-model="roleName"></el-input></el-col>
      <el-col :span="8" class="roleText roleStyle">角色描述</el-col><el-col class="roleStyle" :span="16"><el-input @keyup.native="delSpace('roleDescription')" placeholder="请输入内容" v-model="roleDescription"></el-input></el-col>
    </el-row>
    <!-- 添加列表完成  以下是按钮 -->
    <el-row class="addUserBtn">
      <el-col :sm="9" :xs="6">&emsp;</el-col>
      <el-col :sm="3" :xs="6"><el-button type="primary" @click="save">保存</el-button></el-col>
      <el-col :sm="3" :xs="6"><el-button @click='cancel'>取消</el-button></el-col>
      <el-col :sm="9" :xs="6">&emsp;</el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'amendRole',
  data () {
    return {
			roleId:'',
			roleName:'',
			roleDescription:''
    }
  },
  methods:{
    delSpace (str) {
      this[str]  = this[str].replace(/\s/g,"");
    },
		save() {
			var params = {
				id:this.$route.query.id,
				roleName:this.roleName,
				roleDescription:this.roleDescription
			}
			if(!this.roleName){
				this.$message({
						message:'请填写角色名称',
						type:'warning',
						duration:1500,
						showClose:true
					})
				return
			}
			if(this.roleName.length > 20){
				this.$message({
						message:'角色名称最多20个字符',
						type:'warning',
						duration:1500,
						showClose:true
					})
				return
			}
			if(this.roleDescription.length > 40){
					this.$message({
						message:'角色描述最多40个字符！',
						type:'warning',
						duration:1500,
						showClose:true
					})
				return
			}
			this.$http.post(this._path + '/role/updateRoleInfo',params).then((res)=>{
				if("0000" == res.data.resultCode){
					this.$message({
						message:'保存成功',
						type:'success',
						duration:1500,
						showClose:true
					})
					this.$router.push('/role')
				}else{
					this.requestError(res.this)
				}
			})

		},
		cancel ()  {
			this.$router.push('/role')
		}
	},
	beforeCreate () {
		this.$http.post(this._path + "/role/selectRoleInfo",{id:this.$route.query.id}).then((res)=>{
			if("0000" == res.data.resultCode){
				this.roleId = res.data.data.roleCode;
				this.roleName = res.data.data.roleName;
				this.roleDescription = res.data.data.roleDescription
			}else{
				this.requestError(res.this)
			}
			
		})
	}
}
</script>

<style scoped lang="scss">
@import "./../style/amendRole.scss"
</style>
